{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- 引入核心的css文件 -->
    <link href="{% static "layui/css/layui.css" %}" rel="stylesheet" media="all">
    <!-- 引入核心的js文件-->
    <script src="{% static "layui/layui.js" %}"></script>
    <script src="{% static "js/jquery-3.6.0.min.js" %}"></script>

</head>
<body>
{% csrf_token %}
<div id="EchartZhu" style="width: 1000px;height: 500px;"></div>
<div id="EchartZhu11111" style="width: 1000px;height: 500px;"></div>
</body>
<script type="text/javascript">

    //全局定义一次, echarts  , 引入图表 js
    layui.config({
        base: "{%static '/layui/echarts5.3.3/' %}"  //此处路径请自行处理, 可以使用绝对路径
    }).extend({
        echarts: 'echarts'
    });


    layui.use(["echarts",], function () {
        var echarts = layui.echarts;


        var csrf_token = $("input[name='csrfmiddlewaretoken']").val();
        //console.log(csrf_token)


        var xq = []  // 需要先 定义 列表 变量 、然后在 通过ajex 赋值
        var data_xp = []
        $.ajax({
            //几个参数需要注意一下
            type: "post",  //方法类型
            url: "/tubiao1/",  // 跳转的url
            data: {
                'csrfmiddlewaretoken': csrf_token
            },
            dataType: "json",
            async: false,
            traditional: true,
            success: function (res) {
                //console.log(res.lxpathtemp)
                xq = res.riqilist
                data_xp = res.datalist
            },
        });


        var chartZhu = echarts.init(document.getElementById('EchartZhu'));
        //指定图表配置项和数据
        var option = {
            title: {
                text: '商品订单'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: xq
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '销量',
                type: 'bar',
                data: data_xp,
                itemStyle: {
                    normal: {
                        color: 'red'
                    }
                }
            }]
        }
        chartZhu.setOption(option, true);


        // 上面是 进入 页面 就刷新的
        // 为了定时做个 function
        function load1() {
            var xq = []  // 需要先 定义 列表 变量 、然后在 通过ajex 赋值
            var data_xp = []
            $.ajax({
                //几个参数需要注意一下
                type: "post",  //方法类型
                url: "/tubiao1/",  // 跳转的url
                data: {
                    'csrfmiddlewaretoken': csrf_token
                },
                dataType: "json",
                async: false,
                traditional: true,
                success: function (res) {
                    //console.log(res.lxpathtemp)
                    xq = res.riqilist
                    data_xp = res.datalist
                },
            });


            var chartZhu = echarts.init(document.getElementById('EchartZhu'));
            //指定图表配置项和数据
            var option = {
                title: {
                    text: '商品订单'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: xq
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: data_xp,
                    itemStyle: {
                        normal: {
                            color: 'red'
                        }
                    }
                }]
            }
            chartZhu.setOption(option, true);
        }

        // 定时 刷新一次 表格
        setInterval(function () {
            load1();
        }, 60000)  // 60s
    });
</script>
</html>